{% comment "Angular template!" %}
The code in this file is using ANGULARJS template syntax and not the DJANGO template syntax.
{% endcomment %}
{% verbatim %}
<div data-ng-attr-draggable="{{ editable ? 'true' : 'false' }}"
      data-ng-class="['card', {'calendar-event-inner': (mode == 'calendarweek' || mode == 'calendarday') && calendarmode == 'duration', 'active': opplan.hasOwnProperty('selected'), 'dirty': opplan.dirty}]"
      data-ng-style="{'overflow-y': 'hidden', 'background-color': opplan.color}"
      data-index="{{$index}}" data-reference="{{ opplan.id || opplan.reference }}">
    <div data-ng-if="opplan.type === 'PO'">
      <p>
        <span data-ng-if="opplan.dirty && !opplan.selected" class="badge bg-danger float-end">{{ "unsaved"|translate }}</span>
        <i data-ng-if="isStart(opplan, dt)" class="fa fa-step-backward"></i>&nbsp;
        <i class="fa fa-shopping-cart" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'Purchase Order' | translate }}"></i>&nbsp;
        <strong>{{opplan.operationplan__reference || opplan.reference}}</strong>&nbsp;
        <i data-ng-if="isEnd(opplan, dt)" class="fa fa-step-forward"></i>&nbsp;
        <i data-ng-if="!editable || !opplan.hasOwnProperty('selected')"
           data-ng-class="['fa', {'fa-lock': opplan.status == 'confirmed' || opplan.operationplan__status == 'confirmed', 'fa-unlock-alt': opplan.status == 'approved' || opplan.operationplan__status == 'approved', 'fa-unlock': opplan.status == 'proposed' || opplan.operationplan__status == 'proposed', 'fa-check': opplan.status == 'completed' || opplan.operationplan__status == 'completed', 'fa-times': opplan.status == 'closed' || opplan.operationplan__status == 'closed'}]" aria-hidden="true"></i>
        <span class="btn-group" role="group" data-ng-if="editable && opplan.hasOwnProperty('selected')">
           <button data-ng-if="!opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.status == 'proposed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'proposed'|translate }}" data-ng-click="changeCard(opplan, 'status', opplan.status, 'proposed'); opplan.status = 'proposed'"><i class="fa fa-unlock"></i></button>
           <button data-ng-if="!opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.status == 'approved'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'approved'|translate }}" data-ng-click="changeCard(opplan, 'status', opplan.status, 'approved'); opplan.status = 'approved'"><i class="fa fa-unlock-alt"></i></button>
           <button data-ng-if="!opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.status == 'confirmed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'confirmed'|translate }}" data-ng-click="changeCard(opplan, 'status', opplan.status, 'confirmed'); opplan.status = 'confirmed'"><i class="fa fa-lock"></i></button>
           <button data-ng-if="!opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.status == 'completed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'completed'|translate }}" data-ng-click="changeCard(opplan, 'status', opplan.status, 'completed'); opplan.status = 'completed'"><i class="fa fa-check"></i></button>
           <button data-ng-if="!opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.status == 'closed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'closed'|translate }}" data-ng-click="changeCard(opplan, 'status', opplan.status, 'closed'); opplan.status = 'closed'"><i class="fa fa-times"></i></button>
           <button data-ng-if="opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.operationplan__status == 'proposed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'proposed'|translate }}" data-ng-click="changeCard(opplan, 'operationplan__status', opplan.operationplan__status, 'proposed'); opplan.operationplan__status = 'proposed'"><i class="fa fa-unlock"></i></button>
           <button data-ng-if="opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.operationplan__status == 'approved'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'approved'|translate }}" data-ng-click="changeCard(opplan, 'operationplan__status', opplan.operationplan__status, 'approved'); opplan.operationplan__status = 'approved'"><i class="fa fa-unlock-alt"></i></button>
           <button data-ng-if="opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.operationplan__status == 'confirmed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'confirmed'|translate }}" data-ng-click="changeCard(opplan, 'operationplan__status', opplan.operationplan__status, 'confirmed'); opplan.operationplan__status = 'confirmed'"><i class="fa fa-lock"></i></button>
           <button data-ng-if="opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.operationplan__status == 'completed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'completed'|translate }}" data-ng-click="changeCard(opplan, 'operationplan__status', opplan.operationplan__status, 'completed'); opplan.operationplan__status = 'completed'"><i class="fa fa-check"></i></button>
           <button data-ng-if="opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.operationplan__status == 'closed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'closed'|translate }}" data-ng-click="changeCard(opplan, 'operationplan__status', opplan.operationplan__status, 'closed'); opplan.operationplan__status = 'closed'"><i class="fa fa-times"></i></button>
        </span>
      </p>
      <p>{{opplan.item__name || opplan.item}}&nbsp;
        <a data-ng-click="$event.stopPropagation()"
          href="{{url_prefix}}/detail/input/item/{{ admin_escape(opplan.item__name || opplan.item) }}/">
          <i class='fa fa-caret-right'></i>
        </a>
      </p>
      <p data-ng-if="opplan.item__description || opplan.operationplan__item__description">
        {{opplan.item__description || opplan.operationplan__item__description}}&nbsp;
      </p>
      <p>{{opplan.location}}&nbsp;
        <a data-ng-click="$event.stopPropagation()"
          href="{{url_prefix}}/detail/input/location/{{ admin_escape(opplan.location) }}/">
          <i class='fa fa-caret-right'></i>
        </a>
      </p>
      <p>{{opplan.operationplan__supplier || opplan.supplier}}&nbsp;
        <a data-ng-click="$event.stopPropagation()"
          href="{{url_prefix}}/detail/input/supplier/{{ admin_escape(opplan.supplier) }}/">
          <i class='fa fa-caret-right'></i>
        </a>
      </p>
      <p data-ng-class="{'dirty': opplan.hasOwnProperty('quantityOriginal') || opplan.hasOwnProperty('operationplan__quantityOriginal')}">
        <span data-ng-if="!editable || !opplan.hasOwnProperty('selected')">{{ grid.formatNumber(opplan.operationplan__quantity || opplan.quantity) }}</span>
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && !opplan.hasOwnProperty('operationplan__quantity')" type="number" step="0" min="0" data-ng-focus="oldValue=opplan.quantity"
          data-ng-model="opplan.quantity" data-ng-change="changeCard(opplan, 'quantity', oldValue, opplan.quantity)">
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && opplan.hasOwnProperty('operationplan__quantity')" type="number" step="0" min="0" data-ng-focus="oldValue=opplan.operationplan__quantity"
          data-ng-model="opplan.operationplan__quantity" data-ng-change="changeCard(opplan, 'operationplan__quantity', oldValue, opplan.operationplan__quantity)">
      </p>
      <p data-ng-class="{'dirty': opplan.hasOwnProperty('startdateOriginal') || opplan.hasOwnProperty('operationplan__startdateOriginal')}">
        <span data-ng-if="!editable || !opplan.hasOwnProperty('selected')">{{ (opplan.operationplan__startdate || opplan.startdate) | formatdate }}</span>
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && !opplan.hasOwnProperty('operationplan__startdate')" type="date"
          data-ng-focus="oldValue=opplan.startdate" data-ng-model="opplan.startdate"
          data-ng-change="changeCard(opplan, 'startdate', oldValue, opplan.startdate)">
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && opplan.hasOwnProperty('operationplan__startdate')" type="date"
          data-ng-focus="oldValue=opplan.operationplan__startdate" data-ng-model="opplan.operationplan__startdate"
          data-ng-change="changeCard(opplan, 'operationplan__startdate', oldValue, opplan.operationplan__startdate)">
      </p>
      <p data-ng-class="{'dirty': opplan.hasOwnProperty('enddateOriginal') || opplan.hasOwnProperty('operationplan__enddateOriginal')}">
        <span data-ng-if="!editable || !opplan.hasOwnProperty('selected')">{{ (opplan.operationplan__enddate || opplan.enddate) | formatdate }}</span>
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && !opplan.hasOwnProperty('operationplan__enddate')" type="date" data-ng-focus="oldValue=opplan.enddate"
          data-ng-model="opplan.enddate" data-ng-change="changeCard(opplan, 'enddate', oldValue, opplan.enddate)">
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && opplan.hasOwnProperty('operationplan__enddate')" type="date" data-ng-focus="oldValue=opplan.operationplan__enddate"
          data-ng-model="opplan.operationplan__enddate" data-ng-change="changeCard(opplan, 'operationplan__enddate', oldValue, opplan.operationplan__enddate)">
      </p>
      <p data-ng-if="opplan.remark || opplan.operationplan__remark">
        <span data-ng-if="!editable || !opplan.hasOwnProperty('selected')">{{ opplan.remark || opplan.operationplan__remark}}</span>
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && !opplan.hasOwnProperty('operationplan__remark')" data-ng-focus="oldValue=opplan.remark"
          data-ng-model="opplan.remark" data-ng-change="changeCard(opplan, 'remark', oldValue, opplan.remark)">
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && opplan.hasOwnProperty('operationplan__remark')" data-ng-focus="oldValue=opplan.operationplan__remark"
          data-ng-model="opplan.operationplan__remark" data-ng-change="changeCard(opplan, 'operationplan__remark', oldValue, opplan.operationplan__remark)">
      </p>
    </div>
    <div data-ng-if="(opplan.type || opplan.operationplan__type || type) === 'DO'">
      <p>
        <span data-ng-if="opplan.dirty && !opplan.selected" class="badge bg-danger float-end">{{ "unsaved"|translate }}</span>
        <i data-ng-if="isStart(opplan, dt)" class="fa fa-step-backward"></i>&nbsp;
        <i class="fa fa-truck" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'Distribution Order' | translate }}"></i>&nbsp;
        <strong>{{opplan.operationplan__reference || opplan.reference}}</strong>&nbsp;
        <i data-ng-if="isEnd(opplan, dt)" class="fa fa-step-forward"></i>&nbsp;
        <i data-ng-if="!editable || !opplan.hasOwnProperty('selected')"
           data-ng-class="['fa', {'fa-lock': opplan.status == 'confirmed' || opplan.operationplan__status == 'confirmed', 'fa-unlock-alt': opplan.status == 'approved' || opplan.operationplan__status == 'approved', 'fa-unlock': opplan.status == 'proposed' || opplan.operationplan__status == 'proposed', 'fa-check': opplan.status == 'completed' || opplan.operationplan__status == 'completed', 'fa-times': opplan.status == 'closed' || opplan.operationplan__status == 'closed'}]" aria-hidden="true"></i>
        <span class="btn-group" role="group" data-ng-if="editable && opplan.hasOwnProperty('selected')">
           <button data-ng-if="!opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.status == 'proposed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'proposed'|translate }}" data-ng-click="changeCard(opplan, 'status', opplan.status, 'proposed'); opplan.status = 'proposed'"><i class="fa fa-unlock"></i></button>
           <button data-ng-if="!opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.status == 'approved'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'approved'|translate }}" data-ng-click="changeCard(opplan, 'status', opplan.status, 'approved'); opplan.status = 'approved'"><i class="fa fa-unlock-alt"></i></button>
           <button data-ng-if="!opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.status == 'confirmed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'confirmed'|translate }}" data-ng-click="changeCard(opplan, 'status', opplan.status, 'confirmed'); opplan.status = 'confirmed'"><i class="fa fa-lock"></i></button>
           <button data-ng-if="!opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.status == 'completed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'completed'|translate }}" data-ng-click="changeCard(opplan, 'status', opplan.status, 'completed'); opplan.status = 'completed'"><i class="fa fa-check"></i></button>
           <button data-ng-if="!opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.status == 'closed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'closed'|translate }}" data-ng-click="changeCard(opplan, 'status', opplan.status, 'closed'); opplan.status = 'closed'"><i class="fa fa-times"></i></button>
           <button data-ng-if="opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.operationplan__status == 'proposed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'proposed'|translate }}" data-ng-click="changeCard(opplan, 'operationplan__status', opplan.operationplan__status, 'proposed'); opplan.operationplan__status = 'proposed'"><i class="fa fa-unlock"></i></button>
           <button data-ng-if="opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.operationplan__status == 'approved'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'approved'|translate }}" data-ng-click="changeCard(opplan, 'operationplan__status', opplan.operationplan__status, 'approved'); opplan.operationplan__status = 'approved'"><i class="fa fa-unlock-alt"></i></button>
           <button data-ng-if="opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.operationplan__status == 'confirmed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'confirmed'|translate }}" data-ng-click="changeCard(opplan, 'operationplan__status', opplan.operationplan__status, 'confirmed'); opplan.operationplan__status = 'confirmed'"><i class="fa fa-lock"></i></button>
           <button data-ng-if="opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.operationplan__status == 'completed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'completed'|translate }}" data-ng-click="changeCard(opplan, 'operationplan__status', opplan.operationplan__status, 'completed'); opplan.operationplan__status = 'completed'"><i class="fa fa-check"></i></button>
           <button data-ng-if="opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.operationplan__status == 'closed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'closed'|translate }}" data-ng-click="changeCard(opplan, 'operationplan__status', opplan.operationplan__status, 'closed'); opplan.operationplan__status = 'closed'"><i class="fa fa-times"></i></button>
        </span>
      </p>
      <p>{{ opplan.item__name || opplan.item }}&nbsp;
        <a data-ng-click="$event.stopPropagation()"
          href="{{url_prefix}}/detail/input/item/{{ admin_escape(opplan.item__name || opplan.item) }}/">
          <i class='fa fa-caret-right'></i>
        </a>
      </p>
      <p data-ng-if="opplan.item__description || opplan.operationplan__item__description">
        {{opplan.item__description || opplan.operationplan__item__description}}&nbsp;
      </p>
      <p>{{opplan.operationplan__origin || opplan.origin}}&nbsp;
        <a data-ng-click="$event.stopPropagation()"
          href="{{url_prefix}}/detail/input/location/{{ admin_escape(opplan.operationplan__origin || opplan.origin) }}/">
          <i class='fa fa-caret-right'></i>
        </a>
      </p>
      <p>{{opplan.destination || opplan.operationplan__destination || opplan.operationplan__location || opplan.location}}&nbsp;
        <a data-ng-click="$event.stopPropagation()"
          href="{{url_prefix}}/detail/input/location/{{ admin_escape(opplan.destination || opplan.operationplan__destination || opplan.operationplan__location || opplan.location) }}/">
          <i class='fa fa-caret-right'></i>
        </a>
      </p>
      <p data-ng-class="{'dirty': opplan.hasOwnProperty('quantityOriginal') || opplan.hasOwnProperty('operationplan__quantityOriginal')}">
        <span data-ng-if="!editable || !opplan.hasOwnProperty('selected')">{{ grid.formatNumber(opplan.operationplan__quantity || opplan.quantity) }}</span>
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && !opplan.hasOwnProperty('operationplan__quantity')" type="number" step="0" min="0" data-ng-focus="oldValue=opplan.quantity"
          data-ng-model="opplan.quantity" data-ng-change="changeCard(opplan, 'quantity', oldValue, opplan.quantity)">
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && opplan.hasOwnProperty('operationplan__quantity')" type="number" step="0" min="0" data-ng-focus="oldValue=opplan.operationplan__quantity"
          data-ng-model="opplan.operationplan__quantity" data-ng-change="changeCard(opplan, 'operationplan__quantity', oldValue, opplan.operationplan__quantity)">
      </p>
      <p data-ng-class="{'dirty': opplan.hasOwnProperty('startdateOriginal') || opplan.hasOwnProperty('operationplan__startdateOriginal')}">
        <span data-ng-if="!editable || !opplan.hasOwnProperty('selected')">{{ (opplan.operationplan__startdate || opplan.startdate) | formatdate }}</span>
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && !opplan.hasOwnProperty('operationplan__startdate')" type="date"
          data-ng-focus="oldValue=opplan.startdate" data-ng-model="opplan.startdate"
          data-ng-change="changeCard(opplan, 'startdate', oldValue, opplan.startdate)">
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && opplan.hasOwnProperty('operationplan__startdate')" type="date"
          data-ng-focus="oldValue=opplan.operationplan__startdate" data-ng-model="opplan.operationplan__startdate"
          data-ng-change="changeCard(opplan, 'operationplan__startdate', oldValue, opplan.operationplan__startdate)">
      </p>
      <p data-ng-class="{'dirty': opplan.hasOwnProperty('enddateOriginal') || opplan.hasOwnProperty('operationplan__enddateOriginal')}">
        <span data-ng-if="!editable || !opplan.hasOwnProperty('selected')">{{ (opplan.operationplan__enddate || opplan.enddate) | formatdate }}</span>
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && !opplan.hasOwnProperty('operationplan__enddate')" type="date" data-ng-focus="oldValue=opplan.enddate"
          data-ng-model="opplan.enddate" data-ng-change="changeCard(opplan, 'enddate', oldValue, opplan.enddate)">
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && opplan.hasOwnProperty('operationplan__enddate')" type="date" data-ng-focus="oldValue=opplan.operationplan__enddate"
          data-ng-model="opplan.operationplan__enddate" data-ng-change="changeCard(opplan, 'operationplan__enddate', oldValue, opplan.operationplan__enddate)">
      </p>
      <p data-ng-if="opplan.remark || opplan.operationplan__remark">
        <span data-ng-if="!editable || !opplan.hasOwnProperty('selected')">{{ opplan.remark || opplan.operationplan__remark}}</span>
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && !opplan.hasOwnProperty('operationplan__remark')" data-ng-focus="oldValue=opplan.remark"
          data-ng-model="opplan.remark" data-ng-change="changeCard(opplan, 'remark', oldValue, opplan.remark)">
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && opplan.hasOwnProperty('operationplan__remark')" data-ng-focus="oldValue=opplan.operationplan__remark"
          data-ng-model="opplan.operationplan__remark" data-ng-change="changeCard(opplan, 'operationplan__remark', oldValue, opplan.operationplan__remark)">
      </p>
    </div>
    <div data-ng-if="opplan.type === 'MO'">
      <p>
        <span data-ng-if="opplan.dirty && !opplan.selected" class="badge bg-danger float-end">{{ "unsaved"|translate }}</span>
        <i data-ng-if="isStart(opplan, dt)" class="fa fa-step-backward"></i>&nbsp;
        <i class="fa fa-wrench" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'Manufacturing Order' | translate }}"></i>&nbsp;
        <strong>{{opplan.operationplan__reference || opplan.reference}}</strong>&nbsp;
        <i data-ng-if="isEnd(opplan, dt)" class="fa fa-step-forward"></i>&nbsp;
        <i data-ng-if="!editable || !opplan.hasOwnProperty('selected')"
           data-ng-class="['fa', {'fa-lock': opplan.status == 'confirmed' || opplan.operationplan__status == 'confirmed', 'fa-unlock-alt': opplan.status == 'approved' || opplan.operationplan__status == 'approved', 'fa-unlock': opplan.status == 'proposed' || opplan.operationplan__status == 'proposed', 'fa-check': opplan.status == 'completed' || opplan.operationplan__status == 'completed', 'fa-times': opplan.status == 'closed' || opplan.operationplan__status == 'closed'}]" aria-hidden="true"></i>
        <span class="btn-group" role="group" data-ng-if="editable && opplan.hasOwnProperty('selected')">
           <button data-ng-if="!opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.status == 'proposed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'proposed'|translate }}" data-ng-click="changeCard(opplan, 'status', opplan.status, 'proposed'); opplan.status = 'proposed'"><i class="fa fa-unlock"></i></button>
           <button data-ng-if="!opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.status == 'approved'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'approved'|translate }}" data-ng-click="changeCard(opplan, 'status', opplan.status, 'approved'); opplan.status = 'approved'"><i class="fa fa-unlock-alt"></i></button>
           <button data-ng-if="!opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.status == 'confirmed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'confirmed'|translate }}" data-ng-click="changeCard(opplan, 'status', opplan.status, 'confirmed'); opplan.status = 'confirmed'"><i class="fa fa-lock"></i></button>
           <button data-ng-if="!opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.status == 'completed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'completed'|translate }}" data-ng-click="changeCard(opplan, 'status', opplan.status, 'completed'); opplan.status = 'completed'"><i class="fa fa-check"></i></button>
           <button data-ng-if="!opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.status == 'closed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'closed'|translate }}" data-ng-click="changeCard(opplan, 'status', opplan.status, 'closed'); opplan.status = 'closed'"><i class="fa fa-times"></i></button>
           <button data-ng-if="opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.operationplan__status == 'proposed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'proposed'|translate }}" data-ng-click="changeCard(opplan, 'operationplan__status', opplan.operationplan__status, 'proposed'); opplan.operationplan__status = 'proposed'"><i class="fa fa-unlock"></i></button>
           <button data-ng-if="opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.operationplan__status == 'approved'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'approved'|translate }}" data-ng-click="changeCard(opplan, 'operationplan__status', opplan.operationplan__status, 'approved'); opplan.operationplan__status = 'approved'"><i class="fa fa-unlock-alt"></i></button>
           <button data-ng-if="opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.operationplan__status == 'confirmed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'confirmed'|translate }}" data-ng-click="changeCard(opplan, 'operationplan__status', opplan.operationplan__status, 'confirmed'); opplan.operationplan__status = 'confirmed'"><i class="fa fa-lock"></i></button>
           <button data-ng-if="opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.operationplan__status == 'completed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'completed'|translate }}" data-ng-click="changeCard(opplan, 'operationplan__status', opplan.operationplan__status, 'completed'); opplan.operationplan__status = 'completed'"><i class="fa fa-check"></i></button>
           <button data-ng-if="opplan.hasOwnProperty('operationplan__status')" type="button" data-ng-class="['btn', 'btn-sm', 'btn-primary', {'active': opplan.operationplan__status == 'closed'}]" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'closed'|translate }}" data-ng-click="changeCard(opplan, 'operationplan__status', opplan.operationplan__status, 'closed'); opplan.operationplan__status = 'closed'"><i class="fa fa-times"></i></button>
         </span>
      </p>
      <p data-ng-if="opplan.item__name || opplan.operationplan__item__name">
        {{opplan.item__name || opplan.operationplan__item__name}}&nbsp;
        <a data-ng-click="$event.stopPropagation()"
          href="{{url_prefix}}/detail/input/item/{{ admin_escape(opplan.item__name || opplan.operationplan__item__name) }}/">
          <i class='fa fa-caret-right'></i>
        </a>
      </p>
      <p data-ng-if="opplan.item__description || opplan.operationplan__item__description">
        {{opplan.item__description || opplan.operationplan__item__description}}&nbsp;
      </p>
      <p>{{ opplan.operationplan__name || opplan.operationplan__operation__name || opplan.operation }}&nbsp;
        <a data-ng-click="$event.stopPropagation()"
          href="{{url_prefix}}/detail/input/operation/{{ admin_escape(opplan.operationplan__name || opplan.operationplan__operation__name || opplan.operation) }}/">
          <i class='fa fa-caret-right'></i>
        </a>
      </p>
      <p data-ng-if="opplan.operation__description || opplan.operationplan__operation__description">
        {{opplan.operation__description || opplan.operationplan__operation__description}}&nbsp;
      </p>
      <p data-ng-class="{'dirty': opplan.hasOwnProperty('quantityOriginal') || opplan.hasOwnProperty('operationplan__quantityOriginal')}">
        <span data-ng-if="!editable || !opplan.hasOwnProperty('selected')">{{ grid.formatNumber(opplan.operationplan__quantity || opplan.quantity) }}</span>
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && opplan.hasOwnProperty('operationplan__quantity')" type="number" step="0" min="0" data-ng-focus="oldValue=opplan.operationplan__quantity"
          data-ng-model="opplan.operationplan__quantity" data-ng-change="changeCard(opplan, 'operationplan__quantity', oldValue, opplan.operationplan__quantity)">
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && !opplan.hasOwnProperty('operationplan__quantity')" type="number" step="0" min="0" data-ng-focus="oldValue=opplan.quantity"
          data-ng-model="opplan.quantity" data-ng-change="changeCard(opplan, 'quantity', oldValue, opplan.quantity)">
      </p>
      <p data-ng-class="{'dirty': opplan.hasOwnProperty('quantity_completedOriginal') || opplan.hasOwnProperty('operationplan__quantity_completedOriginal')}">
        <span data-ng-if="!editable || !opplan.hasOwnProperty('selected')">{{ grid.formatNumber(opplan.operationplan__quantity_completed || opplan.quantity_completed || 0) }}</span>
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && opplan.hasOwnProperty('operationplan__quantity')" type="number" step="0" min="0" data-ng-focus="oldValue=opplan.operationplan__quantity_completed || 0"
          data-ng-model="opplan.operationplan__quantity_completed" data-ng-change="changeCard(opplan, 'operationplan__quantity_completed', oldValue, opplan.operationplan__quantity_completed)">
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && !opplan.hasOwnProperty('operationplan__quantity')" type="number" step="0" min="0" data-ng-focus="oldValue=opplan.quantity_completed || 0"
          data-ng-model="opplan.quantity_completed" data-ng-change="changeCard(opplan, 'quantity_completed', oldValue, opplan.quantity_completed)">
      </p>
      <p data-ng-class="{'dirty': opplan.hasOwnProperty('startdateOriginal') || opplan.hasOwnProperty('operationplan__startdateOriginal')}">
        <span data-ng-if="!editable || !opplan.hasOwnProperty('selected')">{{ (opplan.operationplan__startdate || opplan.startdate) | formatdatetime }}</span>
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && !opplan.hasOwnProperty('operationplan__startdate')" type="datetime-local"
          data-ng-focus="oldValue=opplan.startdate" data-ng-model="opplan.startdate"
          data-ng-change="changeCard(opplan, 'startdate', oldValue, opplan.startdate)">
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && opplan.hasOwnProperty('operationplan__startdate')" type="datetime-local"
          data-ng-focus="oldValue=opplan.operationplan__startdate" data-ng-model="opplan.operationplan__startdate"
          data-ng-change="changeCard(opplan, 'operationplan__startdate', oldValue, opplan.operationplan__startdate)">
      </p>
      <p data-ng-class="{'dirty': opplan.hasOwnProperty('enddateOriginal') || opplan.hasOwnProperty('operationplan__enddateOriginal')}">
        <span data-ng-if="!editable || !opplan.hasOwnProperty('selected')">{{ (opplan.operationplan__enddate || opplan.enddate) | formatdatetime }}</span>
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && !opplan.hasOwnProperty('operationplan__enddate')" type="datetime-local" data-ng-focus="oldValue=opplan.enddate"
          data-ng-model="opplan.enddate" data-ng-change="changeCard(opplan, 'enddate', oldValue, opplan.enddate)">
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && opplan.hasOwnProperty('operationplan__enddate')" type="datetime-local" data-ng-focus="oldValue=opplan.operationplan__enddate"
          data-ng-model="opplan.operationplan__enddate" data-ng-change="changeCard(opplan, 'operationplan__enddate', oldValue, opplan.operationplan__enddate)">
      </p>
      <p data-ng-if="opplan.remark || opplan.operationplan__remark">
        <span data-ng-if="!editable || !opplan.hasOwnProperty('selected')">{{ opplan.remark || opplan.operationplan__remark}}</span>
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && !opplan.hasOwnProperty('operationplan__remark')" data-ng-focus="oldValue=opplan.remark"
          data-ng-model="opplan.remark" data-ng-change="changeCard(opplan, 'remark', oldValue, opplan.remark)">
        <input class="form-control" data-ng-if="editable && opplan.hasOwnProperty('selected') && opplan.hasOwnProperty('operationplan__remark')" data-ng-focus="oldValue=opplan.operationplan__remark"
          data-ng-model="opplan.operationplan__remark" data-ng-change="changeCard(opplan, 'operationplan__remark', oldValue, opplan.operationplan__remark)">
      </p>
    </div>
    <div data-no-drag data-ng-if="opplan.type === 'STCK'">
      <p>
        <i class="fa fa-box" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'Stock' | translate }}"></i>&nbsp;
        <strong>{{opplan.item__name}} @ {{opplan.location}}</strong>&nbsp;
        <a data-ng-click="$event.stopPropagation()"
          href="{{url_prefix}}/detail/input/buffer/{{ admin_escape(opplan.item__name + ' @ ' + opplan.location ) }}/">
          <i class='fa fa-caret-right'></i>
        </a>
      </p>
      <p data-ng-if="opplan.item__description || opplan.operationplan__item__description">
        {{opplan.item__description || opplan.operationplan__item__description}}&nbsp;
      </p>
      <p>{{ grid.formatNumber(opplan.operationplan__quantity || opplan.quantity) }}</p>
    </div>
    <div data-no-drag data-ng-if="opplan.type === 'DLVR'">
      <p>
        <i class="fa fa-truck" data-bs-toggle="tooltip" data-bs-html="true" title="{{ 'Delivery' | translate }}"></i>&nbsp;
        <strong>{{opplan.demands[0][1]}}</strong>
      </p>
      <p data-ng-if="opplan.item__name">
        {{opplan.item}}&nbsp;
        <a data-ng-click="$event.stopPropagation()"
          href="{{url_prefix}}/detail/input/item/{{ admin_escape(opplan.item__name) }}/">
          <i class='fa fa-caret-right'></i>
        </a>
      </p>
      <p data-ng-if="opplan.item__description || opplan.operationplan__item__description">
        {{opplan.item__description || opplan.operationplan__item__description}}&nbsp;
      </p>
      <p>{{opplan.location}}&nbsp;
        <a data-ng-click="$event.stopPropagation()"
          href="{{url_prefix}}/detail/input/location/{{ admin_escape(opplan.location) }}/">
          <i class='fa fa-caret-right'></i>
        </a>
      </p>
      <p>{{ (opplan.operationplan__enddate || opplan.enddate) | formatdate }}</p>
      <p>{{ grid.formatNumber(opplan.operationplan__quantity || opplan.quantity) }}</p>
    </div>
</div>
{% endverbatim %}